<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./jsue.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <button v-on:click="click1">修改<tton>
        <button v-on:click="click">修改<tton>

        <button @click="xiaohui">销毁<tton>


    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'helloword'
            },
            methods: {
                click1() {
                    this.msg = '你好，冯三胖'
                },
                click() {
                    this.msg = '你不是冯三胖'
                },
                xiaohui(){
                    this.$destroy();
                }

            },
            // 初始化构建
            beforeCreate() {
                console.log('创建前');

            },
            created() {
                console.log('创建');
                

            } ,          
             //挂载阶段
             beforeMount(){
                console.log('挂载前');
                

             },
             //挂载阶段，vm,$el替换了 el DOM
             mounted(){
                console.log('挂载');
                
             },

            //更新阶段
            beforeUpdate(){
                console.log('更新前');
                
            },
            updated(){
                console.log('更新');
                
            },
            //销毁
            beforeDestroy(){
                console.log('销毁前');
                

            },
            destroyed(){
                console.log('销毁');
            
            }

        })
    </script>
</body>

<ml>